<template>
  <view class="time-selector">
    <text class="label">起卦时间</text>
    <view class="picker-wrapper" @tap="showPicker">
      <text class="time-text">{{ formatDateTime }}</text>
      <image class="arrow" :src="arrowIcon" mode="aspectFit" />
    </view>
    
    <uni-datetime-picker
      ref="picker"
      type="datetime"
      :value="modelValue"
      @change="onTimeChange"
      :border="false"
      hide-second
    />
  </view>
</template>

<script>
import { computed } from 'vue'
import { formatDate } from '@/utils/dateUtil'

export default {
  name: 'TimeSelector',
  
  props: {
    modelValue: {
      type: [Date, String],
      default: () => new Date()
    }
  },
  
  emits: ['update:modelValue', 'change'],
  
  setup(props, { emit }) {
    // 格式化显示时间
    const formatDateTime = computed(() => {
      return formatDate(props.modelValue, 'yyyy-MM-dd HH:mm')
    })
    
    // 显示选择器
    const showPicker = () => {
      uni.showToast({
        title: '请选择时间',
        icon: 'none'
      })
    }
    
    // 时间变更
    const onTimeChange = (e) => {
      emit('update:modelValue', e)
      emit('change', e)
    }
    
    return {
      formatDateTime,
      showPicker,
      onTimeChange,
      arrowIcon: '/static/images/arrow_down.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.time-selector {
  margin-bottom: 30rpx;
  
  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
  }
  
  .picker-wrapper {
    height: 80rpx;
    background-color: #f7f7f7;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    
    .time-text {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .arrow {
      width: 32rpx;
      height: 32rpx;
    }
  }
}
</style>